<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font</title>
    <script src="./js/Three.js"></script>
</head>
<body>

</body>
<script>
    // 场景
    var scene = new THREE.Scene();
    // 相机
    // 75度视角  PerspectiveCamera（远景相机） 长宽比（一般都宽除以高）近裁剪面（相机能看见的最近距离） 远裁剪面（相机能看见的最远距离）
    // 相机的可见范围是一个削平的金字塔（视椎体）
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    // var camera = new THREE.OrthographicCamera(-1,1,2,-2,1,10);
    // 渲染器
    var renderer = new THREE.WebGLRenderer();
    //  渲染空间的尺寸（一般屏幕）
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // 加载字体
    var loader = new THREE.FontLoader();
    loader.load('./fonts/helvetiker_regular.typeface.json', function (font) {
        var mesh =  new THREE.Mesh(new THREE.TextGeometry('Hello',{
            font : font,
            size : 0.5,
            height: 1
        }), new THREE.MeshBasicMaterial({
            color : '#fedcbd',
            opacity : 0.75,
            visible : true
        }));
        scene.add(mesh);

        camera.position.z = 10;

        renderer.render(scene, camera);
    });

</script>
</html>